<template>

    <grid-layout :layout.sync="block" :col-num="12" :row-height="30" :is-draggable="false" :is-resizable="false"
        :is-mirrored="false" :vertical-compact="false" :margin="[10, 10]" :use-css-transforms="false" class="layout-field">

        <grid-item v-for="item in block" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">

            <div class="grid-box" :class="'item-' + item.type + '-' +item.i">
            
                <template v-if="item.type == 'image'">
                    <img style="width:100%" :src=" VITE_URL + '/storage/' + item.content" alt="">
                </template>
                
                <template v-if="item.type == 'text'">

                    <div class="block-text" v-html="item.content"></div>
                </template>

            </div>            
        </grid-item>
    </grid-layout>

</template>

<script lang="ts" setup>

import { ref } from 'vue'
import axios from 'axios';
// import { GridLayout, GridItem } from "vue-grid-layout"
const VITE_URL = window.VITE_URL;

const block = ref([
    // { "x": 0, "y": 0, "w": 2.5, "h": 2, "i": "0" },
    // { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1" },
    // { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2" },
    // { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3" }
])


const get_home_diy = () => {


    const url = VITE_URL + '/pc/diy/home'+ '?i=11';

    // console.log(url,data)
    axios.get(url).then((res: any) => {


        block.value = res.data.diy;

    });

}
get_home_diy();


</script>

<style lang="less"> 

.layout-field{

    // width:1440px;

    .grid-box{

        width:100%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        overflow: hidden;

        .block-text{

            width:100%;
            height:100%;
        }
    }
}
</style>